import React from "react";
import './index.css'
import { Outlet } from "react-router-dom";
import { useNavigate } from "react-router";
import { AppstoreOutlined, FileOutlined, PlusOutlined, StarOutlined, EditOutlined, SettingOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
const { Sider, Content } = Layout;
let item = [
    { label: '首页', icon: <AppstoreOutlined />, children: null, key: 'manage' },
    {
        label: '数据管理', icon: <FileOutlined />, children: [
            { key: 'userList', label: '用户列表' },
            { key: 'shopList', label: '商家列表' },
            { key: 'foodList', label: '食品列表' },
            { key: 'orderList', label: '订单列表' },
            { key: 'adminList', label: '管理员列表' },
        ], key: 'item-1'
    },
  
]
export default function Index() {
    let navigate = useNavigate()
    function change(val) {
        navigate('/' + val.key)
        // console.log(val.key);
    }
    return <Layout
        className="site-layout-background"
        style={{
            height: "100vh",
        }}
    >
        <Sider className="site-layout-background" width={256} >
            <Menu
                theme='dark'
                mode="inline"
                onClick={change}
                style={{
                    height: '100%',
                    color: '#bfcbd9'
                }}
                items={item}
            />
        </Sider>
        <Content
            style={{
                minHeight: "100%",
                backgroundColor: '#fff'
            }}
        >
            {/* 面包屑导航 */}
            <div className="mbx" style={{
                padding: '0 24px',
                backgroundColor: '#eff2f7'
            }}>
                <span>首页</span>
                <img style={{
                    width: '36px',
                    height: '36px',
                    borderRadius: ' 50%',
                }} src="https://elm.cangdu.org/img/default.jpg" />
            </div>
            <Outlet></Outlet>
        </Content>
    </Layout>

}